<template>
  <div class="zscf_block5 mt30 clearfix">
    <div class="zscf_block5_l fl">
      <h2 class="block3_tit clearfix block5_l_tit">
        <span class="block3_curspan news_span">行业动态</span><a href="#">更多></a>
      </h2>
      <div class="block5_box">
        <ul class="news_ul">
          <li
            v-for="(item,index) in develop"
            :key="index"
            class="list"
          >
            <nuxt-link :to="`/development/${item._id}`" class="link">
              {{ item.title }}
            </nuxt-link>
            <span class="date">{{ item.updated | date }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="zscf_block5_r fl">
      <h2 class="block5_r_tit clearfix">
        <span class="fl ">新闻资讯</span>
      </h2>
      <div class="rank_box">
        <div class="rank_list">
          <ul class="rank_list_ul">
            <li v-for="(item,index) in news" :key="index" class="news">
              <em class="rank_bg01">{{ index + 1 }}</em>
              <nuxt-link
                :to="`/news/detail/${item._id}`"
                class="link"
              >
                {{ item.title }}
              </nuxt-link>
              <span>{{ item.updated | date }}</span>
            </li>
          </ul>
        </div>
        <!-- end -->
      </div>
    </div>
  </div>
</template>
<script>
import Api from '~/api'
export default {
  name: 'IndexNews',
  props: {
    develop: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      news: []
    }
  },
  mounted () {
    this.getNews()
  },
  methods: {
    getNews () {
      Api.getNews().then((res) => {
        this.news = res.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.zscf_block5 > div{
  width: 50%;
  box-sizing: border-box;
  height: 255px;
  overflow: hidden;
}
.list{
  display: flex;
  justify-content: space-between;
  .link{
    display: inline-block;
  }
  .date{
    display: inline-block;
  }
}
.link{
  width: 80%;
}

.news{
  display: flex;
  justify-content: space-around;
  align-items: center;
  line-height: 30px;
}
</style>
